﻿@model DoeLibsMVC.Models.EditTopicModel

@*
    this page will be render a modal and doesn't contain a layout. it will be included on the title details page directly
*@

<div class="modal fade" id="editTopicModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

            @using (Html.BeginForm("Edit", "Topic", FormMethod.Post, new { id = "editTopicForm" }))
            {

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span class="closeButton" aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="myModalLabel">Edit author</h4>
            </div>
            <div class="modal-body">
                <table class="formTable">
                    <tbody>
                        <tr>
                            <td>
                                @Html.LabelFor(model => model.TopicName)
                            </td>
                            <td>
                                <div>
                                    @Html.TextBoxFor(model => model.TopicName, new { @id = "topicName", @class = "generalTxtBox", @placeholder = "Topic name" })
                                    @Html.ValidationMessageFor(model => model.TopicName)
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="modal-footer">
                <button type="submit" class="btn btn-primary" id="submitEdiTopicForm">save</button>
            </div>
            }
        </div>
    </div>
</div>

<script type="text/javascript">
    $("#editTopicForm").submit(function () {
        console.log(getFormData($('#editTopicForm')));

        $.ajax({
            url: '/api/topic/@ViewBag.topicId',
            type: 'PUT',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("Authorization", getAuthorizationHeader('@User.UserId', ''));
            },
            data: getFormData($('#editTopicForm')),
            dataType: "json"
        })
        .always(function (data) {
            clearAllErrorFields('editTopicForm');

            console.log(data);
            if (data.status == 200) {
                console.log("success");
                setHttpMessage("Topic successfully edited", true);

                location.reload();

            } else if (data.status == 400) {
                console.log("bad request");

                addErrorsToFields("model.", data.responseJSON);
            } else {
                console.log("status: " + data.status);
                //servererror, etc.
                setHttpMessageDynamic("Technical problems. Please try again", false);
            }
        });

    return false;
    });
</script>